﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="../knockout-3.0.0.js"></script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
</head>
<body>
    <form>
        <button data-bind="click: loadBigshot">Load the media big shot's data</button>
        <button data-bind="click: loadAssistant">Load the put-upon assistant's data</button>
        <div data-bind="with: person">
            <label for="name">Name:</label><input id="name" type="text" data-bind="value: name" /><br />
            <label for="cash">Cash:</label><input id="cash" type="text" data-bind="value: cash" /><br />
            <label for="phone">Phone:</label><input id="phone" type="tel" data-bind="value: phone" />
        </div>
    </form>
    <script>
        var bigshotJSON = '{ "name": "Diamond Joe Quimby", "cash": 10000, "phone": "5558675309" }',
            assistantJSON = '{ "name": "Gil Gunderson", "cash": "two bits", "phone": "8005551212" }';
        var bigshotObservable = ko.mapping.fromJSON(bigshotJSON),
            assistantObservable = ko.mapping.fromJSON(assistantJSON);
        var viewModel = {
              person: ko.observable(),
              loadBigshot: function () {
                  this.person(bigshotObservable);
              },
              loadAssistant: function () {
                  this.person(assistantObservable);
              }
          };

        ko.applyBindings(viewModel);
    </script>
</body>
</html>